<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化demo</title>
    <link href="../styles/common.css" rel="stylesheet">
    <script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
    <script src="../scripts/Plugin/echarts.min.js"></script>
    <script src="../scripts/Plugin/bmap.min.js"></script>
    <!--<script src="http://api.map.baidu.com/api?v=2.0&ak=LelFSt6BfykGf8m3PB5zr8LaXAG2cMg6"></script>-->
    <script src="../scripts/common.js"></script>
    <script src="../scripts/index.js"></script>
    <script src="../scripts/Plugin/laydate/laydate.js"></script>

    <link href="../styles/common.css" rel="stylesheet">
    <script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
    <script src="../scripts/Plugin/echarts.min.js"></script>
    <script src="../scripts/common.js"></script>
    <script src="../scripts/trend.js"></script>
</head>
<body>
<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>
            <li ><i class="nav_1"></i><a href="index.html"></a> </li>
            <li><i class="nav_2"></i><a href="quota.html"></a> </li>
            <li><i class="nav_3"></i><a href="trend.html"></a> </li>
            <li><i class="nav_4"></i><a href="chronic.html"></a> </li>
            </ul>
    </div>
    <div class="header_center left" style="position:relative">
        
        <h2><strong>孙泰和号源池展示平台</strong></h2>

    </div>
    <div class="right nav text_right">
        <ul>

        </ul>
    </div>

</header>
<!--内容部分-->

<div class="con left">
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="../images/info_2.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>省平台上周预约量</p>
                    <p>2500</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_2.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>省平台本周预约量</p>
                    <p>1200</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">
            <div class="con_div_text01 left">
                <img src="../images/info_3.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>后台上周预约量</p>
                    <p class="sky">206</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_3.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>后台本周预约量</p>
                    <p class="sky">153</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="../images/info_5.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>自有渠道上周预约量</p>
                    <p class="org">560</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_5.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>自有渠道本周预约量</p>
                    <p class="org">420</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="con left" style="width:50%;">
    <!--统计分析图-->

    <div class="div_any">
        <div class="left div_any01" style="width:100%;">
            <div class="div_any_child" style="width:98%;position:relative;height: 420px;">
                <div class="div_any_title"><img src="../images/title_14.png">上周医生预约情况统计</div>
                <div id="histogramChart1"  style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
                <div id="lineChart1"  style="width: 52%;height: 66%;display: inline-block;"></div>
                <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: 2%;top: 8%;">
                    <div style="display: inline-block;width:33%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">总号源量</div>
                        <div style="color:#87cefa;font-size: 30px;line-height: 42px;">15080</div>
                    </div><div style="display: inline-block;width:33%;text-align:center;">
                    <div style="color:#fff;font-size: 18px;line-height: 32px;">总预约量</div>
                    <div style="color:red;font-size: 30px;line-height: 42px;">3266</div>
                </div><div style="display: inline-block;width:33%;text-align:center;">
                    <div style="color:#fff;font-size: 18px;line-height: 32px;">预约环比增幅</div>
                    <div style="color:#ff7f50;font-size: 30px;line-height: 42px;">5.36%</div>
                </div>
                </div>
            </div>
        </div>
        <div class="left div_any01" style="width:48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_14.png">复诊患者</div>
                <p id="histogramChart2" class="p_chart" style="height: 400px;"></p>

            </div>
        </div>
        <div class="left div_table_box" style="width: 48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_16.png">预约记录滚动</div>
                <div class="table_p">
                    <table>
                        <thead><tr>
                            <th>序号</th>
                            <th>内容</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr><td>1</td><td>12:04分余鉴仓预约中西医结合科罗科学医生第1号 </td></tr>
                        <tr><td>2</td><td>12:12分陈煜诚预约中西医结合科罗科学医生第2号 </td></tr>
                        <tr><td>3</td><td>12:16分裘国祥预约中西医结合科罗科学医生第3号 </td></tr>
                        <tr><td>4</td><td>12:20分钟家成预约中西医结合科罗科学医生第4号 </td></tr>
                        <tr><td>5</td><td>12:24分钟文慧预约中西医结合科罗科学医生第5号 </td></tr>
                        <tr><td>6</td><td>12:04分余鉴仓预约中西医结合科罗科学医生第6号 </td></tr>
                        <tr><td>7</td><td>12:04分余鉴仓预约中西医结合科罗科学医生第7号 </td></tr>
                        <tr><td>8</td><td>12:04分余鉴仓预约中西医结合科罗科学医生第8号 </td></tr>
                        <tr><td>9</td><td>12:04分余鉴仓预约中西医结合科罗科学医生第9号 </td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="con right" style="width:50%;">
    <div class="div_any">
        <div class="left div_any01" style="width:100%;">
            <div class="div_any_child" style="width:98%;position:relative;height: 420px;">
                <div class="div_any_title"><img src="../images/title_17.png">上周科室预约情况</div>
                <div id="histogramChart3"  style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
                <div id="lineChart2"  style="width: 52%;height: 90%;display: inline-block;"></div>
            </div>
        </div>
        <div class="left div_any01" style="width:48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_18.png">年龄分布</div>
                <p id="pieChart1" class="p_chart" style="height: 400px;"></p>
            </div>
        </div>
        <div class="right div_any01" style="width:48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_19.png">性别分布</div>
                <p id="pieChart2" class="p_chart" style="height: 400px;"></p>
            </div>
        </div>
    </div>
</div>

<div class="con left">
    <!--数据总概-->
    <div class="con_div">
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="../images/info_5.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>丰潭馆上周预约量</p>
                    <p class="org">1200</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_4.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>丰潭馆本周预约量</p>
                    <p class="org">687</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="../images/info_5.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>凤起馆上周预约量</p>
                    <p class="org">1200</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_4.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>凤起馆本周预约量</p>
                    <p class="org">654</p>
                </div>
            </div>
        </div>
        <div class="con_div_text left">

            <div class="con_div_text01 left">
                <img src="../images/info_5.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>和平上周预约量</p>
                    <p class="org">1200</p>
                </div>
            </div>
            <div class="con_div_text01 right">
                <img src="../images/info_4.png" class="left text01_img"/>
                <div class="left text01_div">
                    <p>和平本周预约量</p>
                    <p class="org">698</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
